<template>
    <el-tabs type="border-card" @tab-click="handleTabClick" style="min-height: 800px">
        <el-tab-pane label="单选题">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>试题信息</span>

                    <div style="margin-left: auto">
                        <el-link :underline="false">选择试题难度：</el-link>

                        <el-rate style="display: inline-block"
                                 v-model="degree"
                                 :colors="colors">
                        </el-rate>
                        <el-select v-model="subject" placeholder="请选择科目">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button style="margin-left: 10px" type="success" plain @click="getSubjectQuestion(1)">搜索</el-button>

                        <el-button style="margin-left: 10px" type="primary" plain @click="viewAll">全部试题</el-button>
                    </div>

                </div>
                <div class="text item">
                    <el-table
                            :data="singleData.list"
                            style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="题目 ID">
                                        <span>{{ props.row.question_id }}</span>
                                    </el-form-item>
                                    <el-form-item label="科目">
                                        <span>{{ props.row.subject }}</span>
                                    </el-form-item>
                                    <el-form-item label="题目">
                                        <span>{{ props.row.question_title }}</span>
                                    </el-form-item>
                                    <el-form-item label="分值">
                                        <span>{{ props.row.score }}</span>
                                    </el-form-item>
                                    <el-form-item label="选项A">
                                        <span>{{ props.row.question_a }}</span>
                                    </el-form-item>
                                    <el-form-item label="题目B">
                                        <span>{{ props.row.question_b }}</span>
                                    </el-form-item>
                                    <el-form-item label="题目C">
                                        <span>{{ props.row.question_c }}</span>
                                    </el-form-item>
                                    <el-form-item label="题目D">
                                        <span>{{ props.row.question_d }}</span>
                                    </el-form-item>
                                    <el-form-item label="答案">
                                        <span>{{ props.row.answer }}</span>
                                    </el-form-item>
                                    <el-form-item label="难度">
                                        <span>{{ props.row.degree }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="150"
                                label="题目 ID"
                                prop="question_id">
                        </el-table-column>
                        <el-table-column
                                width="100"
                                label="科目"
                                prop="subject">
                        </el-table-column>
                        <el-table-column
                                width="400"
                                label="题目"
                                prop="question_title">
                        </el-table-column>
                        <el-table-column
                                width="100"
                                label="分值"
                                prop="score">
                        </el-table-column>
                        <el-table-column
                                width="100"
                                label="难度"
                                prop="degree">
                        </el-table-column>

                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">

                                <el-button size="small" type="primary" @click="update(scope.$index,scope.row.id)">修改</el-button>
                                <el-button slot="reference" size="small" type="danger" @click="open(scope.$index,scope.row.id,scope.row.username)">删除</el-button>
                            </template>

                        </el-table-column>
                    </el-table>

                    <!--分页-->
                    <el-pagination class="nav-fenye"
                                   @current-change="handleCurrentChange"
                                   :current-page="this.singleData.currentPage"
                                   :page-size="this.singleData.pageSize"
                                   layout="total, prev, pager, next, jumper"
                                   :total="this.singleData.total">
                    </el-pagination>
                </div>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="判断题">判断题</el-tab-pane>
        <el-tab-pane label="主观题">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>试题信息</span>
                    <div style="margin-left: auto">
                        <el-link :underline="false">选择试题难度：</el-link>
                        <el-rate style="display: inline-block"
                                 v-model="degree"
                                 :colors="colors">
                        </el-rate>
                        <el-select v-model="subject" placeholder="请选择科目">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button style="margin-left: 10px" type="success" plain @click="getSubjectQuestion(1)">搜索</el-button>
                        <el-button style="margin-left: 10px" type="primary" plain @click="viewAll">全部试题</el-button>
                    </div>
                </div>

                <div class="text item">
                    <el-table
                            :data="subjectiveData.list"
                            style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="题目 ID">
                                        <span>{{ props.row.question_id }}</span>
                                    </el-form-item>
                                    <el-form-item label="科目">
                                        <span>{{ props.row.subject }}</span>
                                    </el-form-item>
                                    <el-form-item label="题目">
                                        <span>{{ props.row.question_title }}</span>
                                    </el-form-item>
                                    <el-form-item label="分值">
                                        <span>{{ props.row.score }}</span>
                                    </el-form-item>
                                    <el-form-item label="答案">
                                        <span>{{ props.row.answer }}</span>
                                    </el-form-item>
                                    <el-form-item label="难度">
                                        <span>{{ props.row.degree }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="150"
                                label="题目 ID"
                                prop="question_id">
                        </el-table-column>
                        <el-table-column
                                width="100"
                                label="科目"
                                prop="subject">
                        </el-table-column>
                        <el-table-column
                                width="400"
                                label="题目"
                                prop="question_title">
                        </el-table-column>
                        <el-table-column
                                width="100"
                                label="分值"
                                prop="score">
                        </el-table-column>
                        <el-table-column
                                width="100"
                                label="难度"
                                prop="degree">
                        </el-table-column>

                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button size="small" type="primary" @click="update(scope.$index,scope.row.id)">修改</el-button>
                                <el-button slot="reference" size="small" type="danger" @click="open(scope.$index,scope.row.id,scope.row.username)">删除</el-button>
                            </template>

                        </el-table-column>
                    </el-table>

                    <!--分页-->
                    <el-pagination class="nav-fenye"
                                   @current-change="handleCurrentChange"
                                   :current-page="this.subjectiveData.currentPage"
                                   :page-size="this.subjectiveData.pageSize"
                                   layout="total, prev, pager, next, jumper"
                                   :total="this.subjectiveData.total">
                    </el-pagination>
                </div>
            </el-card>

        </el-tab-pane>

    </el-tabs>

</template>

<script>
    export default {
        name: "QuestionList",
        data(){
            return{
                colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
                currentTab : "0",
                subject: '',//下拉框，考试科目
                degree : 1,//星级，题目难度
                isSearch : false,//是否处于搜索状态，默认否

                options: [{
                    value: '语文',
                    label: '语文'
                }, {
                    value: '数学',
                    label: '数学'
                }, {
                    value: '计算机',
                    label: '计算机'
                }, {
                    value: '历史',
                    label: '历史'
                }, {
                    value: '政治',
                    label: '政治'
                }],

                singleData : {},
                subjectiveData : {},

                keyWord : '',
                updateIndex: false,
            }
        },
        methods : {
            handleTabClick(tab, event) {//处理tab点击，用来判断当前要处理什么类型的题目
                console.log(tab.label,tab.index);
                if (this.currentTab === tab.index) return;//如果当前点击的下标 = 保存的下标，不处理
                this.subject = '';
                this.degree = 1;
                this.isSearch = false;//取消搜索状态
                this.currentTab = tab.index;
                this.initData(1)
            },
            initData(page){//初始化数据
                this.$axios({
                    method : "GET",
                    url:"/admin",
                    params: {
                        method: 'question_list',
                        currentTab : this.currentTab,//当前标签页，对应什么类型的题目
                        currentPage : page
                    }
                }).then((response)=>{
                    if (response.data === null){
                        this.$message({message: '没有搜索到题目', type: 'warning',offset: 150});
                        return
                    }
                    console.log(response.data);
                    switch (this.currentTab) {//判断要处理什么类型的题目
                        case "0" :
                            this.singleData = response.data;
                            console.log(this.singleData)
                            break;
                        case "1" :
                            break;
                        case "2" :
                            this.subjectiveData = response.data;
                            console.log(this.subjectiveData)
                            break;
                    }
                }).catch((error)=>{
                    console.log(error);
                });
            },
            getSubjectQuestion(page){//获得对应科目的试题
                if (this.subject === '' || this.degree === ''){
                    this.$message({message: '搜索条件不能为空', type: 'warning',offset: 150});
                    return
                }
                console.log(this.currentTab)
                console.log(this.subject,this.degree)
                this.$axios({
                    method : "POST",
                    url:"/admin?method=searchQuestion",
                    data : {
                        currentTab : this.currentTab,//当前标签页，对应什么类型的题目
                        subject: this.subject,//下拉框，考试科目
                        degree : this.degree,//星级，题目难度
                        currentPage : page
                    },
                }).then((response)=>{
                    if (response.data === null){
                        this.$message({message: '没有搜索到题目', type: 'warning',offset: 150});
                        return
                    }
                    console.log(response.data);
                    switch (this.currentTab) {
                        case "0" :
                            this.singleData = response.data;break;
                        case "1" :
                            break;
                        case "2" :
                            this.subjectiveData = response.data;break;
                    }
                    this.isSearch = true;
                }).catch((error)=> {
                    console.log(error);
                });
            },
            viewAll(){//查看全部试题
                this.subject = '';
                this.degree = 1;
                this.isSearch = false;//取消搜索状态
                this.initData(1)
            },
            handleCurrentChange(currentPage){//处理分页数据
                if (!this.isSearch){//如果不处于搜索状态，正常获取数据
                    this.initData(currentPage)
                }else {//处于搜索状态，获取对应的数据
                    this.getSubjectQuestion(currentPage)
                }
            },
            update(index, id){//更新用户信息
                this.updateIndex = index
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
        },
        beforeMount (){//初始化数据
            this.initData(1)
        },
        mounted(){
        },
    }
</script>

<style scoped>
    *{
        outline:none
    }
    >>>.el-form{
        width: auto;
    }
    .el-card__header{
        background-color: rgba(0,0,0,.03);
    }
    .el-card__body{
        padding-top: 0;
    }
    .clearfix{
        display: flex;
        align-items: center;
    }
    .text {
        font-size: 14px;
    }
    .item {
        margin-bottom: 18px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    tr{
        height: 60px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    >>> .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .el-form--inline .el-form-item__content{
        vertical-align: baseline;
    }

    @media (max-width: 900px){
        .el-button+.el-button{
            margin-left: 0;
        }
    }



</style>
